<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-date-picker
					class="x_soso"
					v-model="valueDate"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<!-- <el-date-picker class="x_soso" v-model="search.payBTime" type="date" value-format="yyyy-MM-dd" placeholder="起始时间"></el-date-picker>
				<el-date-picker class="x_soso" v-model="search.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker> -->
				<el-input class="x_soso" v-model="searchInput" placeholder="请输入用户名称/账号/绑定手机号搜索"></el-input>
				<el-button type="primary" @click="searchList">查询</el-button>
				
			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click="refushData">刷新</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="用户头像" align="center"  prop="userImg">
					<template slot-scope="scope">
						<img :src="scope.row.personImg" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="姓名" align="center"  prop="personName"></el-table-column>
				<el-table-column label="昵称" align="center"  prop="personNick"></el-table-column>
				<el-table-column label="电话" align="center"  prop="personPhone"></el-table-column>
				<el-table-column label="是否关注公众号" align="center"  prop="isUnion">
					<template scope="scope">
						<span v-if='scope.row.isUnion==1'>是</span>
						<span v-if='scope.row.isUnion==0'>否</span>
					</template>
				</el-table-column>
				<el-table-column label="平台身份" align="center"  prop="powerValue"></el-table-column>
				<el-table-column label="所在区域" align="left"  prop="cityName"></el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination
					background
					@current-change="columnFind"
					:current-page="page.page"
					:page-size="page.pagesize"
					layout="prev, pager, next, jumper, total"
					:total="page.count"
				></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
import { userList } from '../../../server/index.js';
import Cookie from 'js-cookie';
export default {
	inject:['reload'], 
	data() {
		return {
			valueDate: [],
			loading: false,
			tableData: [],
			ruleForm: {},
			page: {
				count: 0,
				pagesize: 8,
				page: 1
			},
			searchInput:'',
			search:{},
		}
	},
	mounted(){
		var page = 1;
		this.columnFind(page);
		Cookie.remove('tabList');
	},
	methods: {
		searchList() {
			this.columnFind(1);
		},
		// 刷新
		refushData(){
			this.reload();
		},
		columnFind(page) {
			const _this = this;
			_this.page.page = page;
			let startTime = _this.valueDate[0];
			let endTime = _this.valueDate[1];
			let obj = {
				page: _this.page.page,
				rows: _this.page.pagesize,
				startCreateTime: undefined == startTime ? '' : startTime,
				endCreateTime: undefined == endTime ? '' : endTime,
// 				startCreateTime:undefined == _this.search.payBTime ? '' : _this.search.payBTime,
// 				endCreateTime:undefined == _this.search.EndTime ? '' : _this.search.EndTime,
				keyword:undefined == _this.searchInput ? '' : _this.searchInput
			};
			_this.http.request({
				url: userList,
				data: obj,
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
					_this.page.count = res.total;
				},
				error:function(err){
					_this.$message({
						offset: '200',
						message: err.msg
					})
				}
			});
		}
	}
};
</script>

<style scoped="scoped" lang="less">
	.el-button--primary{
		background: rgba(113, 106, 202, 1);
		border: none;
	}
	.el-button--primary:hover{
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}
</style>
